<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="抵用券明细" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="voucherBox">
			<view class="contentBox">
				<view>
					<view class="titleBox">
						<text class="title">可用抵用券</text>
					</view>
					<text class="info">1.<text>74</text></text>
				</view>
				<view>
					<view class="titleBox">
						<text class="title">冻结抵用券</text>
						<uni-icons class="icon" type="help" size="19" color="rgb(181, 181, 181)"></uni-icons>
					</view>
					<view class="infoBox">
						<text class="infoText">1.<text>74</text></text>
						<uni-icons class="leaveFor" type="right" size="19" color="rgb(181, 181, 181)"></uni-icons>
					</view>
				</view>
				<view>
					<view class="titleBox">
						<text class="title">待结算抵用券</text>
						<uni-icons class="icon" type="help" size="19" color="rgb(181, 181, 181)"></uni-icons>
					</view>
					<text class="info">1.<text>74</text></text>
				</view>
			</view>
			<view class="otherBox">
				<view class="itemBox">
					<text class="title">未生效抵用券</text>
					<text class="info">1.<text>74</text></text>
					<uni-icons class="leaveFor" type="right" size="19" color="rgb(54, 54, 54)"></uni-icons>
				</view>
				<view class="itemBox" @click="goVoucherActivation">
					<text class="title">潮客可激活抵用券</text>
					<text class="info">1.<text>74</text></text>
					<uni-icons class="leaveFor" type="right" size="19" color="rgb(54, 54, 54)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="classifiedFieldBox">
			<view class="classifiedBox">
				<text 
					v-for="(item) in classified"
					:key="item.type"
					:class="{classifiedCheck: item.type == classifiedActive}"
					@click="classifiedActive = item.type"
				>{{item.label}}</text>
			</view>
			<view class="timeIntervalBox" v-if="[1,2].includes(classifiedActive)">
				<text>2024-10</text>
				<image src="../../../static/icons/assetAccount-filter.png"></image>
			</view>
		</view>
		<view class="recordBox" :style="{top:`${[1,2].includes(classifiedActive) ? 720 : 635}rpx`}">
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无数据~</text>
			</view>
			<view class="tableData">
				<view class="subsidiesAndIncentives" @click="goSubsidyDetail">
					<view class="balanceDate">
						<text class="title">结算日期</text>
						<text class="info">2025-01-21</text>
					</view>
					<view class="orderParticipation">
						<text class="title">参与订单数</text>
						<text class="info">6</text>
					</view>
					<view class="incomeVoucher">
						<text class="title">收入抵用券</text>
						<text class="info">189.05</text>
					</view>
				</view>
				<view class="memberRewards" @click="goMembershipDetails">
					<view class="balanceDate">
						<text class="title">结算日期</text>
						<text class="info">2025-01-21</text>
					</view>
					<view class="orderParticipation">
						<text class="title">参与订单数</text>
						<text class="info">6</text>
					</view>
					<view class="incomeVoucher">
						<text class="title">收入抵用券</text>
						<text class="info">189.05</text>
					</view>
				</view>
				<view class="hipsterBonus">
					<text class="voucher">+ 57.7000</text>
					<text class="activationTime">激活时间: 2025-01-01 11:29:30</text>
				</view>
				<view class="usageRecord">
					<text class="userName">Migou</text>
					<text class="type">消费打折</text>
					<text class="orderNumber">订单编号: 1851479934774632453</text>
					<text class="deduction">-987.00</text>
					<text class="variableTime">变动时间: 2024-10-01 12:23:18</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				classified:[
					{type:1,label:"补贴奖励"},
					{type:2,label:"会员奖励"},
					{type:3,label:"潮客激活"},
					{type:4,label:"使用记录"},
				],
				classifiedActive:1
			}
		},
		methods:{
			goVoucherActivation()
			{
				this.$Router.push({
					path:"/pages/merchant/voucher/voucherActivation"
				})
			},
			/**补贴奖励明细**/
			goSubsidyDetail()
			{
				this.$Router.push({
					path:"/pages/merchant/voucher/subsidyDetail"
				})
			},
			/**会员奖励明细**/
			goMembershipDetails()
			{
				this.$Router.push({
					path:"/pages/merchant/voucher/membershipDetails"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.voucherBox{
		width: 100%;
		height: 300rpx;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		.contentBox{
			width: 100%;
			padding: 15rpx 0rpx;
			height: 80rpx;
			background-color: #fff;
			float: left;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			.titleBox{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 35rpx;
				.title{
					width: auto;
					float: left;
					text-align: center;
					font-size: 27rpx;
					color: rgb(181, 181, 181);
				}
			}
			.info{
				width: 90%;
				text-align: center;
				float: left;
				height: 40rpx;
				line-height: 40rpx;
				margin-top: 5rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: rgb(54, 54, 54);
				text{
					font-size: 26rpx;
				}
			}
			.infoBox{
				width: 90%;
				text-align: center;
				float: left;
				height: 40rpx;
				margin-top: 5rpx;
				.infoText{
					font-size: 34rpx;
					font-weight: bold;
					color: rgb(54, 54, 54);
					text{
						font-size: 26rpx;
					}
				}
				.leaveFor{
					margin-left: 3rpx;
				}
			}
			
		}
		.otherBox{
			margin-top:10rpx;
			width: calc(100% - 60rpx);
			height: 170rpx;
			padding: 10rpx 0rpx;
			border-top: 1rpx solid #f5f5f5;
			float: left;
			margin-left: 30rpx;
			.itemBox{
				width: 100%;
				height: 70rpx;
				float: left;
				display: flex;
				align-items: center;
				.title{
					width: auto;
					float: left;
					font-size: 28rpx;
					font-weight: 450;
					color: rgb(53, 53, 53);
				}
				.leaveFor{
					float: right;
				}
				.info{
					flex: 1;
					float: left;
					text-align: right;
					font-size: 34rpx;
					font-weight: bold;
					color: rgb(53, 53, 53);
					text{
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.classifiedFieldBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f7f7f7;
		.classifiedBox{
			width: 100%;
			height: 85rpx;
			float: left;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			text{
				width: 100%;
				height: 100%;
				line-height: 85rpx;
				text-align: center;
				font-size: 31rpx;
				color: rgb(152, 152, 152);
			}
			.classifiedCheck{
				color: rgb(56, 56, 56);
			}
			.classifiedCheck:before{
				content: '';
				width: 116rpx;
				height: 7rpx;
				position: absolute;
				margin-top: 70rpx;
				background-color: #ffbc04;
			}
		}
		.timeIntervalBox{
			width: 91%;
			height: 70rpx;
			background-color: #f5f5f5;
			float: left;
			margin-left: 4.5%;
			margin-top: 20rpx;
			border-radius: 35rpx;
			text{
				width: auto;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 27rpx;
				margin-left: 30rpx;
				float: left;
				color: rgb(167, 167, 167);
			}
			image{
				width: 40rpx;
				height: 40rpx;
				float: right;
				margin-right: 30rpx;
				margin-top: 15rpx;
			}
		}
	}
	.recordBox{
		position: absolute;
		bottom: 0rpx;
		float: left;
		width: 100%;
		overflow-y: auto;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 350rpx;
				height: 350rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -175rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			.subsidiesAndIncentives,.memberRewards{
				width: calc(100% - 50rpx);
				height: 90rpx;
				padding: 20rpx 25rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				.balanceDate,.orderParticipation{
					width: calc(39% - 20rpx);
					height: 100%;
					float: left;
					margin-left: 20rpx;
				}
				.incomeVoucher{
					width: 22%;
					height: 100%;
					float: left;
				}
				.title{
					width: 100%;
					float: left;
					height: 45rpx;
					line-height: 45rpx;
					font-size: 26rpx;
					color: rgb(105, 105, 105);
				}
				.info{
					width: 100%;
					float: left;
					height: 45rpx;
					line-height: 45rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: rgb(53, 53, 53);
				}
			}
			.hipsterBonus{
				width: calc(100% - 50rpx);
				float: left;
				height: 90rpx;
				padding: 20rpx 25rpx;
				background-color: #fff;
				.voucher{
					width: calc(100% - 40rpx);
					margin-left: 20rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 39rpx;
					color: #e9515d;
					font-weight: bold;
					float: left;
				}
				.activationTime{
					width: calc(100% - 40rpx);
					margin-left: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 25rpx;
					float: left;
					color: rgb(90, 90, 90);
				}
			}
			.hipsterBonus::after{
				content: '';
				position: absolute;
				width: 90%;
				float: left;
				height: 1rpx;
				background-color: #f5f5f5;
				margin-top:109rpx;
				float: left;
				left: 5%;
			}
			.usageRecord{
				width: calc(100% - 50rpx);
				height: 160rpx;
				padding: 20rpx 25rpx;
				float: left;
				background-color: #fff;
				.userName{
					width: calc(65% - 20rpx);
					margin-left: 20rpx;
					float: left;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 32rpx;
					font-weight: 450;
					color: #262626;
				}
				.type{
					width: calc(35% - 20rpx);
					margin-right: 20rpx;
					float: right;
					height: 50rpx;
					text-align: right;
					font-size: 27rpx;
					color: rgb(63, 63, 63);
				}
				.orderNumber{
					width: calc(65% - 20rpx);
					margin-left: 20rpx;
					float: left;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 27rpx;
					color: rgb(63, 63, 63);
				}
				.deduction{
					width: calc(35% - 20rpx);
					margin-right: 20rpx;
					float: right;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 42rpx;
					text-align: right;
					font-weight: bold;
					color: #53c61e;
				}
				.variableTime{
					width: calc(100% - 40rpx);
					float: left;
					margin-left: 20rpx;
					font-size: 27rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: rgb(63, 63, 63);
				}
			}
			.usageRecord::after{
				content: '';
				position: absolute;
				width: 90%;
				float: left;
				height: 1rpx;
				background-color: #f5f5f5;
				margin-top:179rpx;
				float: left;
				left: 5%;
			}
		}
	}
</style>